<template>
  <div ref="all" id="all">
    <h1>{{ msg }}</h1>
    <div ref="imgdiv" id="imgdiv">
      <img src="@/assets/logo.png" alt />
    </div>

    <el-button @click="action">截图</el-button>
    <el-button @click="action2">下载截图</el-button>
    <el-button @click="action3">下载成pdf</el-button>
    <el-button @click="action4">下载成png</el-button>
    <div v-if="imgUrl">
      <img :src="imgUrl" alt="">
    </div>
    <!-- <div v-html="html"></div> -->
    <!-- <vue-markdown :source="html"></vue-markdown> -->
    <vue-markdown :source="html "></vue-markdown>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import { getPdf, getPng } from "../assets/js/utlis.js";
// import mdFile from "../assets/tsetMD.md";
import VueMarkdown from "vue-markdown";
export default {
  name: "html2canvas",
  mounted() {
    this.html = require("../assets/tsetMD.md");
  },
  components: {
    VueMarkdown,
  },
  data() {
    return {
      msg: "html2canvas  截图效果",
      imgUrl: "",
      imgmap: "",
      html: "",
    };
  },
  methods: {
    action() {
      html2canvas(this.$refs.imgdiv).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        this.imgUrl = dataURL;
        console.log("this.imgUrl", this.imgUrl);
        // window.open(this.imgUrl);
        if (this.imgUrl !== "") {
          this.dialogTableVisible = true;
        }
      });
    },
    action2() {
      html2canvas(document.getElementById("imgdiv")).then((canvas) => {
        this.imgmap = canvas.toDataURL();
        console.log(999, this.imgmap);
        if (window.navigator.msSaveOrOpenBlob) {
          var bstr = atob(this.imgmap.split(",")[1]);
          var n = bstr.length;
          var u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          var blob = new Blob([u8arr]);
          window.navigator.msSaveOrOpenBlob(
            blob,
            "chart-download" + "." + "png"
          );
        } else {
          // 这里就按照chrome等新版浏览器来处理
          const a = document.createElement("a");
          a.href = this.imgmap;
          a.setAttribute("download", "chart-download");
          a.click();
        }
      });
    },
    action3() {
      //pdf下载
      let dom = this.$refs.all;
      getPdf(dom, "pdf文件测试");
    },
    action4() {
      let dom = this.$refs.all;
      getPng(dom, "png文件测试");
    },
  },
};
</script>
<style scoped>
</style>
